<template>
  <div class="container">
    <div class="row">
      <!--头像-->
      <div class="col-3">
        <div class="card">
          <div class="card-body">
            <img :src="$store.state.user.photo" alt="头像" style="width: 100%">
          </div>
        </div>
      </div>
      <!--我的bot-->
      <div class="col-9">
        <div class="card">
          <!-- 头 -->
          <div class="card-header">
            我的bot
            <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn"
                    data-bs-whatever="@mdo">
              创建Bot
            </button>
            <!-- 添加bot modal -->
            <div class="modal fade" id="add-bot-btn" tabindex="-1" aria-hidden="true">
              <div class="modal-dialog modal-xl">
                <div class="modal-content">
                  <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">创建Bot</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <form>
                      <div class="mb-3">
                        <label for="add-bot-title" class="col-form-label">名称:</label>
                        <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title">
                      </div>
                      <div class="mb-3">
                        <label for="add-bot-description" class="col-form-label">简介:</label>
                        <textarea v-model="botadd.description" class="form-control" id="add-bot-description"></textarea>
                      </div>
                      <div class="mb-3">
                        <label class="col-form-label">代码:</label>
                        <textarea v-model="botadd.content" class="form-control"
                                  style="height: 300px; font-size: large"></textarea>
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <div class="error-message">{{ botadd.error_message }}</div>
                    <button type="button" class="btn btn-primary" @click="add_bot">创建</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 身体 -->
          <div class="card-body">
            <table class="table table-striped table-hover">
              <thead>
              <tr>
                <td>名称</td>
                <td>创建时间</td>
                <td>操作</td>
              </tr>
              </thead>
              <tbody>
              <tr v-for="bot in bots" :key="bot.id">
                <td>{{ bot.title }}</td>
                <td>{{ bot.createtime }}</td>
                <td>
                  <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
                          :data-bs-target="'#update-bot-modal-' + bot.id">修改
                  </button>
                  <button type="button" class="btn btn-danger" @click="remove_bot(bot.id)">删除</button>

                  <!--修改Bot-->
                  <div class="modal fade" :id="'update-bot-modal-' + bot.id" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h1 class="modal-title fs-5">修改Bot</h1>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                          <form>
                            <div class="mb-3">
                              <label for="update-bot-title" class="col-form-label">名称:</label>
                              <input v-model="bot.title" type="text" class="form-control" id="update-bot-title">
                            </div>
                            <div class="mb-3">
                              <label for="update-bot-description" class="col-form-label">简介:</label>
                              <textarea v-model="bot.description" class="form-control"
                                        id="update-bot-description"></textarea>
                            </div>
                            <div class="mb-3">
                              <label class="form-label">代码</label>
                              <textarea v-model="bot.content" class="form-control"
                                        style="height: 300px"/>
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <div class="error-message">{{ bot.error_message }}</div>
                          <button type="button" class="btn btn-primary" @click="update_bot(bot)">确认修改</button>
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="refresh_bots">
                            取消
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import {useStore} from 'vuex';
import {ref, reactive} from 'vue'
import {Modal} from 'bootstrap/dist/js/bootstrap'

export default {
  name: "UserBotIndexView",
  setup() {
    const store = useStore();
    let bots = ref([]);           //获取数据

    const botadd = reactive({     //添加数据绑定模型
      title: "",
      description: "",
      content: "",
      error_message: ""
    });

    //获取Bot列表
    const refresh_bots = () => {
      $.ajax({
        url: '/api/user/bot/getlist/',
        type: 'get',
        headers: {
          Authorization: 'Bearer ' + store.state.user.token
        },
        success(resp) {
          bots.value = resp;        //返回的数据也是列表,所以直接赋值
        }, error(resp) {
          console.log(resp);
        }
      })
    }

    //请求所有数据
    refresh_bots();

    //添加Bot
    const add_bot = () => {
      $.ajax({
        url: '/api/user/bot/add/',
        type: 'post',
        headers: {
          Authorization: 'Bearer ' + store.state.user.token
        },
        data: {
          title: botadd.title,
          description: botadd.description,
          content: botadd.content
        },
        success(resp) {
          if (resp.error_message === "success") {
            //清空数据
            botadd.title = "";
            botadd.description = "";
            botadd.content = "";
            Modal.getInstance("#add-bot-btn").hide();       //隐藏添加modal框

            //刷新数据
            refresh_bots();
          } else {
            botadd.error_message = resp.error_message;
          }
        }, error(resp) {
          console.log(resp);
        }
      })
    }

    //删除Bot
    const remove_bot = (bot_id) => {
      $.ajax({
        url: '/api/user/bot/remove/',
        type: 'post',
        headers: {
          Authorization: 'Bearer ' + store.state.user.token
        }, data: {
          bot_id: bot_id
        },
        success(resp) {
          if (resp.error_message === "success") {
            refresh_bots();
          } else {
            botadd.error_message = resp.error_message;
          }
        }, error(resp) {
          console.log(resp);
        }
      })
    }

    //更新Bot
    const update_bot = (bot) => {
      $.ajax({
        url: '/api/user/bot/update/',
        type: 'post',
        headers: {
          Authorization: 'Bearer ' + store.state.user.token
        },
        data: {
          bot_id: bot.id,
          title: bot.title,
          description: bot.description,
          content: bot.content
        },
        success(resp) {
          if (resp.error_message === "success") {
            Modal.getInstance("#update-bot-modal-" + bot.id).hide();
            refresh_bots();
          } else {
            botadd.error_message = resp.error_message;
          }
        }, error(resp) {
          console.log(resp);
        }
      })
    }

    return {
      bots,             //获取数据模型
      botadd,           //添加数据模型
      add_bot,          //添加Bot函数
      remove_bot,       //删除Bot函数
      update_bot,       //更新Bot函数
      refresh_bots      //获取Bot数据
    }
  }
}
</script>

<style scoped>
.container {
  margin-top: 20px;
}

button {
  margin-right: 10px;
}

div.error-message {
  color: red;
}

</style>